<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>Test</p>
    <script>
        /* 模板字面量 使用````符号 可以保留换行*/

        let pageHTML = `
            <a href="#">test</a>
        `;
        let p = document.getElementsByTagName("p");
        p[0].innerHTML += pageHTML;
        // 字符串插值拼接 ${} ${}中可以插入任意js表达式
        let a = 'a', b = 'b';
        console.log(`i am ${a}${b}c`);
        let hellofn = function () { return "Hello" };
        console.log(`${hellofn()}World`);

        // 引用模板字符串本身可以将其写成函数
        let func = name => `I am ${name}`;
        console.log(func('lili'));

        // 标签函数
        let c = 1, d = 2;
        function simpleTag(stringArr, ...values) {
            // = simpleTag(stringArr, value1, value2, value3)
            console.log(stringArr, values);
        }
        simpleTag`hello ${c} world ${d} ${c + d}`;
        // = simpleTag(['hello', 'world', '', ''], 1, 2, 3)
        // stringArr为模板字符串中原有的字符(包括空格) values为每个表达式的结果

        // 手写模板 - 递归
        let template = '我是{{name}}，年龄{{age}}，性别{{sex}}';
        let data = {
            name: '姓名',
            age: 18
        }
        const k = 'name';
        console.log(render(template, data));; // 我是姓名，年龄18，性别undefined
        function render(template, data) {
            // 模板字符串正则
            // exec返回的数组中，整体为0，括号中的元素为1   { const reg = /a(bd(f)s)/, test = "ffffabdfs"; console.log(reg.exec(test)); // ['abdfs', 'bdfs', 'f'] }
            const reg = /\{\{(\w+)\}\}/;
            // 判断模板里是否有模板字符串
            if (reg.test(template)) {
                // 查找当前模板里第一个模板字符串的字段，对应正则表达式()中的内容
                // name数组中存着两个元素,分别是{{name}}和name 
                const name = reg.exec(template)[1];
                // 将第一个模板字符串渲染
                template = template.replace(reg, data[name]);
                // 递归的渲染并返回渲染后的结构
                return render(template, data);
            }
            // 如果模板没有模板字符串直接返回
            return template;
        }


        /* 新方法 */
        function showTest() {
            let s = '  saya'; // 2个空格
            console.log(s);
            let test = [];
            test[0] = s.indexOf('s'); // 2 
            test[1] = s.startsWith(' '); //true
            test[2] = s.endsWith('p'); //false
            test[3] = s.trim();
            test[4] = s.trimLeft(); // trimStart()
            test[5] = s.repeat(2);
            test[6] = s.padStart(10, "bar");
            test[7] = s.matchAll();
            test[8] = s.replaceAll(" ", "zheshi");
            /* 
                replaceAll()的第二个参数replacement是一个字符串，表示替换的文本，其中可以使用一些特殊字符串。
                $&：匹配的字符串。
                $` ：匹配结果前面的文本。
                $'：匹配结果后面的文本。
                $n：匹配成功的第n组内容，n是从1开始的自然数。这个参数生效的前提是，第一个参数必须是正则表达式。
                $$：指代美元符号$。
            */
            test[9] = s;
            return test;
        }
        console.log(showTest());

    </script>
</body>

</html>